<template>
	<view class="container">
		<view class="content"
		:style="{
			'marginTop': nodeModel.marginTop + 'rpx',
			'width': nodeModel.widthForFlex1 + 'rpx',
			'height': nodeModel.heightForFlex1 + 'rpx'
		}">
			<!-- 头像 -->
			<view style="display: flex;flex-direction: row;align-items: center;z-index: 1;"
			  v-if="nodeModel.isShowForFlex2 && (userInfo.avatarUrl_new || userInfo.nickname)"
			  :style="{
				'marginTop': nodeModel.marginTopForFlex2 + 'rpx',
				'flex-direction': nodeModel.flex_directionForFlex2,
				'align-items': nodeModel.align_itemsForFlex2,
			  }"
			  >
			  <image :src="userInfo.avatarUrl" mode="aspectFill"
			  v-if="userInfo.avatarUrl"
			  :style="{
				'width': nodeModel.widthForCover2 + 'rpx',
			  	'height': nodeModel.heightForCover2 + 'rpx',
				'borderRadius': nodeModel.borderRadiusForCover2 + 'rpx'}"></image>
				
			  <view style="margin-left: 8px;">
				<view :style="{
				  'marginTop': nodeModel.marginTopForText2+'rpx',
				  'color': nodeModel.colorForText2,
				  'font-size': nodeModel.fontsizeForText2 + 'rpx',
				  'font-weight': nodeModel.fontweightForText2,
				}">{{userInfo.nickname}}</view>
				<view :style="{
				  'marginTop': nodeModel.marginTopForTitle+'rpx',
				  'color': nodeModel.colorForTitle,
				  'font-size': nodeModel.fontsizeForTitle + 'rpx',
				  'font-weight': nodeModel.fontweightForTitle,
				}">{{advert.content}}</view>
			  </view>
			</view>
			<!-- 二维码 -->
			<!-- v-if="userInfo.rankModel.rankGrade>0||userInfo.rankModel_high.rankGrade>0||userInfo.bagRankModel.rankGrade>0" -->
			<view
			style="display: flex;flex-direction: column;align-items: center;"
			:style="{
				'marginTop': nodeModel.marginTopForFlex1 + 'rpx',
				'flex-direction': nodeModel.flex_directionForFlex1,
				'align-items': nodeModel.align_itemsForFlex1,
			}">
				<image :src="'data:image/png;base64,' + base64_code" mode=""
				:style="{
					'width': nodeModel.widthForCover1 + 'rpx',
					'height': nodeModel.widthForCover1 + 'rpx',
				}"></image>
				<view style=""
					:style="{
						'marginTop': nodeModel.marginTopForText1 + 'rpx'
					}">
					<text v-if="nodeModel.titleForText1"
					:style="{
						'color': nodeModel.colorForText1,
						'font-size': nodeModel.fontsizeForText1 + 'rpx',
						'font-weight': nodeModel.fontweightForText1
					}">{{nodeModel.titleForText1}}</text>
					<text 
					:style="{
						'color': nodeModel.colorForText1,
						'font-size': nodeModel.fontsizeForText1 + 'rpx',
						'font-weight': nodeModel.fontweightForText1
					}">{{referralCode}}</text>
				</view>
			</view>
			
			<!-- <view
			style="text-align: center;"
			:style="{
				'marginTop': nodeModel.marginTopForText1 + 'rpx',
				'width': nodeModel.widthForCover1 + 'rpx',
				'height': nodeModel.widthForCover1 + 'rpx',
				'color': nodeModel.colorForText1,
				'font-size': nodeModel.fontsizeForText1 + 'rpx',
				'font-weight': nodeModel.fontweightForText1
			}">
				暂无权限
			</view> -->
			<image class="bg" :src="advert.coverUrl" mode='scaleToFill'
			:style="{
				'width': nodeModel.widthForFlex1 + 'rpx',
				'height': nodeModel.heightForFlex1 + 'rpx',}"></image>
		</view>
		
	</view>
</template>

<script>
	import {user} from '@/api/user.js'
	import {common} from '@/api/common.js'
	import {
		page
	} from '@/api/page.js'
	export default {
		data() {
			return {
				userInfo: {rankModel:{},rankModel_high:{}},
				referralCode: '',
				regUrl: '',
				clientInfo: {},
				base64_code: '',
				nodeList: [],
				nodeModel: {},
				advert: {},
				pageConfig: {}
			}
		},
		onLoad() {
			var that = this
			uni.$on('findKey', function(data) {
				console.log("收到通知，刷新数据")
				that.getUserInfo()
			})
			this.loadData()
		},
		onShow() {
			this.clientInfo = this.$storage.getStorageDataSync('clientInfo')
			this.getUserInfo()
		},
		onPullDownRefresh() {
			this.loadData()
		},
		onUnload() {
			uni.$off('findKey')
		},
		onShareAppMessage(res) {
			return {
				title: '',
				path: '/pages/home/home?parentCode=' + this.referralCode + '&clientname=' + this.$store.state.clientname + '&CHN=regCode'
			}
		},
		methods:{
			loadData(){
				this.getPageByClientname()
			},
			getPageByClientname() {
				page.getPageByClientname({
					name: this.$Route.name
				}).then(res => {
					uni.stopPullDownRefresh()
					if (res.data.code == 10000) {
						this.pageConfig = res.data.data
						this.setPageConfig(this.pageConfig)
						this.nodeList = res.data.data.nodeList
						for(var node of this.nodeList){
							if(node.componentModel.name == 'share'){
								this.advert = node.advertList[0]
								this.nodeModel = node
							}
						}
					}
				})
			},
			setPageConfig(pageConfig){
				this.pageConfig = pageConfig
				uni.setNavigationBarTitle({
					title: this.pageConfig.title
				})
				uni.setNavigationBarColor({
					backgroundColor: this.pageConfig.background,
					frontColor: (!this.pageConfig.navigationBarBackground || this.pageConfig.navigationBarBackground =='#FFF' || this.pageConfig.navigationBarBackground =='#fff' || this.pageConfig.navigationBarBackground =='#FFFFFF' || this.pageConfig.navigationBarBackground =='#ffffff')  ? "" : "#ffffff"
				})
			},
			getUserInfo() {
				user.getUserInfo().then(res => {
					if (res.data.code == 10000) {
						var userInfo = res.data.data
						this.userInfo = userInfo
						if(userInfo.code){
							this.referralCode = userInfo.code
							if(this.clientInfo.updateUrlForAndriod){
								this.regUrl = 'https://love.server.higo8.top/#/pages/login/reg?parentCode=' + this.referralCode + '&clientname=' + this.$store.state.openshop+'_minipro'
							}else{
								this.regUrl = this.clientInfo.baseUrl + '?clientname='+this.$store.state.clientname+'&parentCode=' + this.referralCode + '&CHN=regCode'
								
							}
							this.createCode(this.regUrl)
						}
					}
				})
			},
			createCode(content) {
				common.createCode({
					content: content 
				}).then(res => {
					if (res.data.code == 10000) {
						this.base64_code = res.data.data
					}
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
.container{
	width: 100%;
	height: 100vh;
}
.bg{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
}
.content{
	display: flex;
	flex-direction: column;
	align-items: center;
	z-index: 1;
	position: relative;
	.shareBtn{
		width: 100%;
		height: 200rpx;
		background-color: #4CD964;
		
	}
}

</style>
